<template>
    <el-dialog title="设置员工的角色" :visible="isShowDialog" @close="btnCancel">
      <el-checkbox-group v-model="checkList">
      <!-- checkbox 组件 label 用来绑定数据, 如果想要自定义显示, 使用开闭标签插槽 -->
      <el-checkbox
        v-for="item in list"
        :key="item.id"
        :label="item.id"
      >
        {{item.name}}
      </el-checkbox>
    </el-checkbox-group>

    <template #footer>
      <el-button size="small" type="primary" @click="btnOK">确定</el-button>
      <el-button size="small" @close="btnCancel">取消</el-button>
    </template>
    </el-dialog>
  </template>
  
  <script>
  import {getRoleList} from '@/api/setting'
  import {assignRole} from '@/api/employees'
  export default {
    props: {
      isShowDialog: {
        type: Boolean,
        default: false
      }
    },
  data() {
    return {
      // 所有角色总表
      list: [],
      // 当前选中的角色id数组
      checkList: [],
      // 点击当前员工的id
      id:[]
    }
  },
  async created() {
    const res = await getRoleList({
      page: 1,
      pagesize: 999
    })
    console.log('获取所有角色', res)
    this.list = res.rows
    },

    methods:{
      async btnOK() {
      await assignRole({
        id: this.id,
        roleIds: this.checkList
      })
      // 提醒用户
      this.$message.success('操作成功')
      // 关闭弹窗
      this.$emit('closeDialog')
    },
    btnCancel() {
      this.$emit('closeDialog')
    }
    }
  }
  </script>
  
  <style>
  
  </style>